<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/index.min.css">
    <script src="../js/flexible.js"></script>
    <link rel="stylesheet" href="../swiper-8.3.0/swiper/swiper-bundle.css">
    <script src="../swiper-8.3.0/swiper/swiper-bundle.min.js"></script>
    <link rel="stylesheet" href="../css/font_3646150_ujdk016uf8/iconfont.css">
    <script src="../css/font_3646150_ujdk016uf8/iconfont.js"></script>
    <script src="../jquery/jquery-1.12.4.min.js"></script>
</head>

<body>
    <header>
        <div class="outer">
            <div class="left">
                <span class="iconfont icon-caidan
                "></span>
            </div>
            <div class="middle">
                <div class="inner_left">
                    <span class="iconfont icon-jingdong"></span>
                </div>
                <div class="inner_middle">
                    <span class="iconfont icon-fangdajing"></span>
                </div>
                <div class="inner_right">
                    <input type="text" name="searching" id="searching" placeholder="请输入搜索内容">
                </div>
            </div>
            <div class="right">
                <p>登录</p>
            </div>
        </div>
    </header>
    <main>
        <div class="banner">
            <div class="swiper">
                <div class="swiper-wrapper">
                    <!-- 等待渲染 -->
                </div>
                <!-- 如果需要分页器 -->
                <div class="swiper-pagination"></div>
            </div>
        </div>
        <div class="other">
            <div class="swiper">
                <div class="swiper-wrapper">
                    <!-- 等待渲染 -->
                </div>
                <!-- 如果需要分页器 -->
                <div class="swiper-pagination"></div>
            </div>
        </div>
        <div class="floor-container">
            <div class="title_wrap">
                <div class="left">
                    <span>京东秒杀</span>
                    <span class="span2">14</span>
                    <p>00</p>：
                    <p>00</p>：
                    <p>00</p>
                </div>
                <div class="right">
                    爆款轮番秒<span></span>
                </div>
            </div>
            <div class="contain_wrap">
                <div class="goods">
                </div>
            </div>
        </div>






        </div>
    </main>
    <footer>
        <div class="big">
            <div class="box_5">
                <img src="https://img11.360buyimg.com/jdphoto/s130x100_jfs/t1/67550/26/12426/5094/5d9c4b13Eea435a3f/81328b0609c60a3c.png"
                    alt="">
            </div>
            <div class="box_5">
                <img src="https://img11.360buyimg.com/jdphoto/s130x100_jfs/t1/56507/6/12787/3168/5d9c4b12Ef363dd8d/4af32f42575509d8.png"
                    alt="">
            </div>
            <div class="box_5">
                <img src="https://img12.360buyimg.com/img/s130x100_jfs/t1/204426/12/6992/3308/61446d8eEcda57bc4/8c9c49ed85ddd182.png"
                    alt="">
            </div>
            <div class="box_5">
                <img src="https://img11.360buyimg.com/jdphoto/s130x100_jfs/t1/64954/4/12406/3529/5d9c4b12Ee7a82735/f2fe0a88bf344736.png"
                    alt="">
            </div>
            <div class="box_5">
                <img src="https://img12.360buyimg.com/img/s130x100_jfs/t1/203343/14/10880/3097/61641568E184a8e0b/4522f6ec5bb9b10b.png"
                    alt="">
            </div>
        </div>

    </footer>
</body>
<!-- 轮播图渲染 -->
<script>
    //轮播图渲染
    $.ajax({
        method: "get",
        url: "http://localhost:8080/banner",
        data: {},
        success: (data) => {
            /*  var daaa = JSON.parse(data)
             console.log(daaa) */
            var banner_string = ""
            for (i = 0; i < data.length; i++) {
                banner_string += `<div class="swiper-slide">
                                <img src="${data[i].img}">
                                </div>`
            }
            // console.log(banner_string)
            $(".banner .swiper-wrapper").html(banner_string);
            // console.log($(".banner .swiper-wrapper"))
            var mySwiper = new Swiper('.banner .swiper', {
                // direction: 'vertical', // 垂直切换选项
                loop: true, // 循环模式选项
                autoplay: true,
                autoplay: {
                    delay: 1000,
                    stopOnLastSlide: false,
                    disableOnInteraction: false,
                    onSlideChangeEnd: function (swiper) {
                        swiper.update();
                        swiper.startAutoplay();
                        swiper.reLoop();
                    },
                    observer: true,
                },
                // 如果需要分页器
                pagination: {
                    el: '.banner .swiper-pagination',
                },

                // 如果需要前进后退按钮
                // navigation: {
                //     nextEl: '.swiper-button-next',
                //     prevEl: '.swiper-button-prev',
                // },

                // 如果需要滚动条
                // scrollbar: {
                //     el: '.swiper-scrollbar',
                // },
            })
        },
        error: () => {
            console.log("banner_ajax_failed")
        }
    })
</script>
<!-- other渲染 -->
<script>
    //other渲染
    $.ajax({
        method: "get",
        url: "http://localhost:8080/other",
        data: {},
        success: (data) => {
            /*  var daaa = JSON.parse(data)
             console.log(daaa) */
            var other_str = "";
            for (var i = 0; i < data.otherData.length; i++) {
                if (i == 0) {
                    other_str += `<div class="page${(i % 10)+1} swiper-slide">
                        <div class="little_box"><img
                                src="${data.otherData[i].src}">
                            <p>${data.otherData[i].text}</p>
                        </div>`
                } else if (i == data.otherData.length - 1) {
                    other_str += `<div class="little_box"><img
                                src="${data.otherData[i].src}">
                                <p>${data.otherData[i].text}</p>
                            </div>
                            </div>`
                } else if (i % 9 == 0) {
                    other_str += `<div class="little_box"><img
                                src="${data.otherData[i].src}">
                                <p>${data.otherData[i].text}</p>
                            </div>
                            </div><div class="page${2} swiper-slide">`
                } else {
                    other_str += `<div class="little_box"><img
                                src="${data.otherData[i].src}">
                                <p>${data.otherData[i].text}</p>
                            </div>`
                }
            }
            $(".other .swiper-wrapper").html(other_str)
            var mySwiper = new Swiper('.other .swiper', {
                loop: false, // 循环模式选项
                autoplay: false,
                // 如果需要分页器
                pagination: {
                    el: '.other .swiper-pagination',
                    bulletActiveClass: 'my-bullet-active',
                },
            })
        },
        error: () => {
            console.log("other_ajax_failed")
        }
    })
</script>
<!-- goods渲染 -->
<script>
    $.ajax({
        method: "get",
        url: "http://localhost:8080/goods",
        data: {},
        success: (data) => {
            console.log(data.goodsData)
            var goods_data = "";
            for (var i = 0; i < data.goodsData.length; i++) {
                goods_data += `<div class="goods_info">
                        <img src="${data.goodsData[i].src}">
                        <p>￥<span>${data.goodsData[i].text}</span></p>
                    </div>`
            }
            $(".goods").html(goods_data)
        },
        error: () => {
            console.log("goods_data_GET_FAILED")
        }
    })
</script>


</html>